<template>
    <CommonTitle title-name="项目基本信息"></CommonTitle>
    <!--    项目基本信息      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="合同名称">
                        <el-input v-model="form.contractName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="项目名称">
                        <el-input v-model="form.projectName" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="合同编号">
                        <el-input v-model="form.contractId" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="任务来源">
                        <el-input v-model="form.meetingTitle" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="签约方信息"></CommonTitle>
    <!--    承租方(签约方信息)      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-row>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="甲方名称">
                        <el-input :model-value="form.owner" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="11">
                    <el-form-item class="el-form-item-width" label="乙方名称">
                        <el-input :model-value="form.leaseCustomers && form.leaseCustomers.length !== 0
                            ? form.leaseCustomers[0].customerName
                            : '暂无'
                            " disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="出租资产和房源信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
        <el-form :inline="true">
            <el-form-item class="el-form-item-width" label="资产名称">
                <el-input v-model="form.assetsName" disabled />
            </el-form-item>
            <el-form-item class="el-form-item-width" label="资产位置">
                <el-input v-model="form.address" disabled />
            </el-form-item>
            <el-row>
                <el-col :span="9">
                    <el-form-item class="el-form-item-width" label="使用面积">
                        <el-input v-model="form.leaseTotalArea" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="13">
                    <el-form-item class="el-form-item-width" label="房源明细">
                        <el-input :model-value="form.leaseHousings && form.leaseHousings.length !== 0
                            ? form.leaseHousings[0].housingNumber : ''
                            " disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9">
                    <el-form-item class="el-form-item-width" label="服务周期">
                        <el-input :model-value="form.signStartTime + '-' + form.signEndTime" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="13">
                    <el-form-item class="el-form-item-width" label="服务用途">
                        <el-input v-model="form.businessPurpose" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="费用信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
        <el-form label-position="left">
            <el-row>
                <el-col :span="6">
                    <el-form-item class="el-form-item-width" label="合同金额">
                        <el-input
                            :model-value="((form.monthCount || 0) * parseFloat(form.propertyFeeUnitPrice || 0) * form.leaseTotalArea || 0).toFixed(2) || ''"
                            disabled />
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

    </el-card>


    <CommonTitle class="m-t30" title-name="协议经办方信息"></CommonTitle>
    <el-card class="card-box" shadow="never">
        <el-form>
            <el-row>
                <el-col class="d-flex a-center" :span="3">
                    <el-form-item class="m-b0" label="经办人">
                        <span>{{ form.manageUserName || "暂无" }}</span>
                    </el-form-item>
                </el-col>
                <el-col class="d-flex a-center" :span="3">
                    <el-form-item class="m-b0" label="部门">
                        <span>{{ form.departmentName }}</span>
                    </el-form-item>
                </el-col>
                <el-col class="d-flex a-center" :span="3">
                    <el-form-item class="m-b0" label="">
                        <!-- <span>{{ form.departmentName }}</span> -->
                        <el-button type="primary" color="#fc702b" style="color: #fff"
                            @click="openHandler(form?.routeUrl)">查看审批流程</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
    ElCard,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
} from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { contractApi } from "@/api/assets";
import { onMounted, reactive, ref } from "vue";

let form = ref({});

const tableData = reactive([]);

const router = useRouter();

// 从路由path中获取的
const getContractId = router.currentRoute.value.params.contractId;

// 查询会审单
const getHuiShenForm = () => {
    contractApi
        .getCheckupInfo({
            contractId: getContractId,
        })
        .then((res) => {
            form.value = res.data;
        });
};
const openHandler = (url = "") => {
    window.open(url);
};
onMounted(() => {
    getHuiShenForm();
});
</script>

<style lang="scss" scoped>
.fileVoList {
    .fileItem {
        .fileItem-font {
            color: #ff7b56;
            cursor: pointer;
        }
    }
}


.container {
    width: 100%;
    height: auto !important;

    .card-box {
        width: 100%;

        .input-width {
            width: 548px;
        }

        .el-form-item-width {
            width: 100%;
        }
    }

    .button-wrapper {
        width: 100%;
    }
}
</style>
